<template>
    <view class=" ">
        <z-paging
            ref="paging"
            v-model="dataList"
            @query="queryList">
            <template #top>
                <tn-navbar>车库管理</tn-navbar>
            </template>
            <view class="tn-bg-card">
                <view class="tn-p">
                    <view
                        v-for="(item, index) in dataList"
                        :key="index"
                        class="tn-shadow-md tn-p-sm tn-mb tn-radius tn-black_text tn-white_bg">
                        <view class="tn-flex justify-between justify-start tn-mb-sm">
                            <view>
                                <tn-title
                                    :title="item.name"
                                    mode="vLine"
                                    assist-color="tn-blue"
                                    size="lg" />
                            </view>
                            <text class="tn-round tn-white_text tn-orange_bg tn-text-bold tn-pt-xs tn-pb-xs tn-pr-sm tn-pl-sm">
                                {{ item.type }}
                            </text>
                        </view>
                        <view class="tn-gradient-bg__grey-light tn-radius tn-mt tn-p tn-ml-0 tn-mr-0">
                            <view class="tn-flex justify-between tn-mb-sm">
                                <text>
                                    <tn-icon
                                        name="taxi-fill"
                                        size="40"
                                        color="#355aff"></tn-icon>
                                    总车位
                                </text>
                                <text>{{ item.total }} </text>
                            </view>
                            <view class="tn-flex justify-between">
                                <text>
                                    <tn-icon
                                        name="taxi"
                                        size="40"
                                        color="#93D9FF"></tn-icon>
                                    空车位：
                                </text>
                                <text>{{ item.residue }} </text>
                            </view>
                        </view>
                        <view class="tn-flex justify-end tn-mt-sm">
                            <view class="tn-m-xs">
                                <tn-button
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="editPopup(item)">
                                    <tn-icon
                                        name="edit-write-fill"
                                        size="30"></tn-icon>
                                    编辑
                                </tn-button>
                            </view>
                            <view class="tn-m-xs">
                                <tn-button
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="deleteModal(item.id)">
                                    <tn-icon
                                        name="delete"
                                        size="30"
                                        color="tn-red"></tn-icon>
                                    删除
                                </tn-button>
                            </view>
                        </view>
                    </view>
                </view></view
            >

            <view class="tn-tabbar-height"></view>
            <template #loadingMoreNoMore></template>
        </z-paging>

        <view>
            <!-- 悬浮按钮 -->
            <tn-suspend-button
                icon="add"
                size="sm"
                bg-color="tn-gradient-bg__cool-5"
                text-color="tn-white"
                @click="openPopup" />
            <!-- 添加车库配置 -->
            <tn-popup
                v-model="isPopupVisible"
                top="0"
                open-direction="bottom"
                @close="closePopup"
                close-btn
                >
                <view class="tn-m-sm tn-p-sm">
					<view class="tn-mb-xl">
					  <tn-title
					    size="lg"
					    title="车库管理"
					    mode="hLine"
					    sub-title="VehicleType"
					    assist-color="tn-blue" />
					</view>
                    <tn-form
                        ref="formRef"
                        :model="formData"
                        label-position="top">
                        <tn-form-item label="所属车场"
                            ><tn-input
                                v-model="formData.parkingLotName"
                                disabled></tn-input
                        ></tn-form-item>
                        <tn-form-item label="车库名称"><tn-input v-model="formData.carPlate"></tn-input></tn-form-item>
                        <tn-form-item
                            label="车库类型"
                            prop="billingMethod">
                            <tn-bubble-box
                                :options="COUPON_TYPE"
                                position="bottom"
                                @click="confirmBubble(COUPON_TYPE, 'couponType', $event)">
                                <tn-input
                                    style="pointer-events: none"
                                    :model-value="pickerDict.label.couponType[formData.couponType]"
                                    placeholder="请选择车库类型" />
                            </tn-bubble-box>
                        </tn-form-item>
                        <tn-form-item
                            label="所属车库"
                            prop="carType">
                            <tn-bubble-box
                                :options="COUPON_UNITS"
                                position="bottom"
                                @click="confirmBubble(COUPON_UNITS, 'couponUnits', $event)">
                                <tn-input
                                    style="pointer-events: none"
                                    :model-value="pickerDict.label.couponUnits[formData.couponUnits]"
                                    placeholder="请选择所属车库" />
                            </tn-bubble-box>
                        </tn-form-item>
                        <tn-form-item label="总车位"><tn-input v-model="formData.remark"></tn-input></tn-form-item>
                        <tn-form-item label="空车位"><tn-input v-model="formData.remark"></tn-input></tn-form-item>
                        <tn-form-item label="备注"><tn-input v-model="formData.remark"></tn-input></tn-form-item>
                        <view class="tn-flex justify-between">
							
							<tn-button
							    :shadow="true"
							    shadow-color="tn-grey"
							    @click="confirmEditVehicleType"
							    size="lg"
							    width="80%"
							    bg-color="tn-gray">
							    取消
							  </tn-button>
							<tn-button
							  :shadow="true"
							  shadow-color="tn-grey"
							  @click="confirmEdit"
							  size="lg"
							  width="80%"
							  bg-color="tn-blue">
							  确认
							</tn-button>
						 </view>
								 
                    </tn-form>
                </view>
            </tn-popup>
            <!-- 选择器 -->
            <tn-picker
                v-model:open="openPickerVisible"
                :data="pickerData"
                @confirm="confirmPicker"
                @close="closePicker" />

            <!-- 删除弹框 -->
            <tn-modal ref="modalRef" />
        </view>
    </view>
</template>

<script setup lang="ts">
    import { onMounted, ref } from "vue";
    import TnSuspendButton from "tnuiv3p-tn-suspend-button/index.vue";

    import { COUPON_TYPE, COUPON_UNITS } from "@/utils/dict"; // 引入计费方式和车库字典
    import { onLoad } from "@dcloudio/uni-app";
    import type { TnModalInstance } from "@/uni_modules/tuniaoui-vue3";
    // ===============模拟数据 =========================

    // 模拟数据
    const tempList = ref([]);

    // z-paging 示例
    const paging = ref(null);
    // 数据列表
    const dataList = ref();

    const queryList = (pageNo, pageSize) => {
        // 模拟数据

        for (let i = 0; i < 10; i++) {
            tempList.value.push({
                name: "地面" + i,
                type: "主车库",
                total: 11111,
                residue: 212,
            });
        }
        paging.value.complete(tempList.value);
    };

    // ===========================================

    // 控制添加车库弹框
    const isPopupVisible = ref(false);

    const openPopup = () => {
        formData.value.parkingLotName = "停车场";
        isPopupVisible.value = true;
    };
    const editPopup = (data: Object) => {
        formData.value = data;
        isPopupVisible.value = true;
    };

    const closePopup = () => {
        isPopupVisible.value = false;
    };
    const confirmEdit = () => {
        console.log(formData.value);
        // 确认修改逻辑
        closePopup();
    };

    // 字典枚举映射
    const pickerDict = ref({
        dict: {
            couponUnits: COUPON_UNITS,
            couponType: COUPON_TYPE,
        },
        label: {},
    });

    // 选择器key
    const pickerKey = ref("");
    // 选择器数据
    const pickerData = ref([]);

    // 控制选择器的可见性
    const openPickerVisible = ref(false);

    // 打开选择器
    const openPicker = type => {
        pickerKey.value = type;
        pickerData.value = pickerDict.value.dict[type];
        openPickerVisible.value = true; // 显示选择器
    };

    // 关闭选择器
    const closePicker = () => {
        openPickerVisible.value = false; // 隐藏选择器
    };

    // 确认选择器的选择
    const confirmPicker = value => {
        formData.value[pickerKey.value] = value;
        closePicker(); // 关闭选择器
    };
    // 确认选择器的选择
    const confirmBubble = (dict, labelKey, value) => {
        console.log("confirmBubble=>", labelKey);
        console.log("confirmBubble1=>", dict[value].value);
        formData.value[labelKey] = dict[value].value;
        // closePicker(); // 关闭选择器
    };
    // 处理pickerDict.value 内的字典数据格式为 {billingMethod:{value:label}}
    const getDictLabel = () => {
        pickerDict.value.label = {};
        for (let key in pickerDict.value.dict) {
            let dict = pickerDict.value.dict[key];
            pickerDict.value.label[key] = dict.reduce((acc, cur) => {
                acc[cur.value] = cur.label || cur.text;
                return acc;
            }, {});
        }
    };

    // 表单数据模型
    const formData = ref({
        parkingLotName: null,
        couponType: "",
        couponUnits: "",
        ownerPhone: "",
        address: "",
        billingMethod: "",
        unitPrice: "",
        quantity: "",
        balance: "",
        amountReceivable: "",
        amountReceived: "",
        validityStart: "",
        validityEnd: "",
        carType: "",
        remarks: "",
        noRenewal: null,
    });

    const deleteGarage = (id: String) => {};
    // 车库操作-车库删除ref
    const modalRef = ref<TnModalInstance>();

    // 车库操作-车库删除弹框确认
    const deleteModal = (id: String) => {
        modalRef.value?.showModal({
            title: "提示",
            content: "是否删除车库",
            confirmText: "确定",
            cancelText: "取消",
            showCancel: true,
            cancel: () => {
                return true;
            },
            confirm: () => {
                deleteGarage(id);
            },
        });
    };

    onLoad(() => {
        getDictLabel();
    });
</script>
<style lang="scss" scoped></style>
